<template>
  <div class="index-page page">
    <div class="block" style="transform:rotateY(45deg);">
      <div @click="jump(1)" class="item">
        <img class="menu-icon" src="/static/menu/1.png">
        <div class="menu-name">就业态势</div>
      </div>
      <div class="line"></div>
      <div @click="jump(2)" class="item">
        <img class="menu-icon" src="/static/menu/2.png">
        <div class="menu-name">人力资源情况</div>
      </div>
      <div class="line"></div>
      <div @click="jump(3)" class="item">
        <img class="menu-icon" src="/static/menu/3.png">
        <div class="menu-name">招聘求职</div>
      </div>
      <div class="line"></div>
      <div @click="jump(4)" class="item">
        <img class="menu-icon" src="/static/menu/4.png">
        <div class="menu-name">运营情况分析</div>
      </div>
      <div class="line"></div>
      <div @click="jump(5)" class="item">
        <img class="menu-icon" src="/static/menu/5.png">
        <div class="menu-name">失业分析</div>
      </div>
    </div>
    <div class="block full">
      <div class="number-block" style="position: relative;z-index: 1">
        <Number-Item class="number-item" v-for="item in numberData" :key="item.id" :name="item.name" :number="item.number" :color="item.color" :icon="item.icon"></Number-Item>
      </div>
      <div style="position: absolute;right:0px;bottom: -15px;color: #fff;font-size: 14px">就业数</div>
      <div id="map"></div>
    </div>
    <div class="block" style="transform:rotateY(-45deg);">
      <div @click="jump(6)" class="item">
        <img class="menu-icon" src="/static/menu/6.png">
        <div class="menu-name">动态帮扶分析</div>
      </div>
      <div class="line"></div>
      <div @click="jump(7)" class="item">
        <img class="menu-icon" src="/static/menu/7.png">
        <div class="menu-name">用户情况分析</div>
      </div>
      <div class="line"></div>
      <div @click="jump(8)" class="item">
        <img class="menu-icon" src="/static/menu/8.png">
        <div class="menu-name">职业培训分析</div>
      </div>
      <div class="line"></div>
      <div @click="jump(9)" class="item">
        <img class="menu-icon" src="/static/menu/9.png">
        <div class="menu-name">求职招聘分析</div>
      </div>
      <div class="line"></div>
      <div @click="jump(10)" class="item">
        <img class="menu-icon" src="/static/menu/10.png">
        <div class="menu-name">创业服务分析</div>
      </div>
    </div>
  </div>
</template>

<script>

import NumberItem from "@/components/NumbeItem/NumberItem.vue";
import {getNum} from "@/utils/utils";

export default {
  name: "index",
  data(){
    return{
      numberData:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'注册总人数',icon:'icon-caishouzhongliang',number:78053},
        {id:3,color:['#30cbf7','#1997e1'],name:'岗位总数',icon:'icon-caishouzhongliang',number:10120},
        {id:4,color:['#12f1b8','#0db5e6'],name:'简历投递总数',icon:'icon-caishouzhongliang',number:22145},
      ],
    }
  },
  components: {NumberItem},
  methods:{
    jump(index){
      if(index<9){
        this.$router.push({name:'Statistics-'+index})
      }
    },
    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));
      this.$axios.get('/static/js/jqs_json.json').then((res) => {
        this.$echarts.registerMap('jqsMap', res.data);
        let option = {
          visualMap: {
            left: 'right',
            top: 'bottom',
            max:10000,
            bottom:20,
            inRange: {
              color: [
                'rgba(17,74,112,0.2)',
                '#46a9ff',
              ]
            },
            textStyle: {
              color: "#fff"
            },
            calculable: true
          },
          xAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          yAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          series:[
            {
              map: "jqsMap",
              center:[96.171627,40.419396],
              zoom:16,
              type:'map',
              data:[
                {name: '肃州区', value: getNum(1,10000,8000)[0]},
                {name: '玉门市', value: getNum(1,9000,8000)[0]},
                {name: '金塔县', value: getNum(1,8000,7000)[0]},
                {name: '瓜州县', value: getNum(1,9000,8000)[0]},
                {name: '敦煌市', value: getNum(1,9000,8000)[0]},
                {name: '阿克塞县', value: getNum(1,6000,4000)[0]},
                {name: '肃北县', value: getNum(1,6000,4000)[0]},
              ],
              label: {
                show: true,
                fontSize: "14",
                color: "#fff"
              },
              itemStyle: {
                borderColor: "#058eb8",
                areaColor: "rgba(17,74,112,0.2)",
                borderWidth: 1,
                shadowBlur: 2,
                shadowColor: "#0f2652",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                },
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                }
              },
              select:{
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                },
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                }
              }
            }
          ]
        }
        myCharts.setOption(option)
      })
    }
  },
  mounted() {
    this.initMap()
  }
}
</script>

<style scoped lang="scss">
.index-page{
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  perspective: 2500px;
  height: calc(100% - 100px);
  .block{
    width:calc((100% - 20px) / 4);
    height: 95%;
    background: rgba(70, 169, 255, 0.05);
    border-radius: 8px;
    box-shadow: inset 0 -20px 11px 0 rgba(70, 169, 255, 0.5);
    //border: 1px solid rgba(70, 169, 255, 0.5);
    .item{
      padding: 0 30px;
      height:calc((100% - 8px)/5);
      width: 100%;
      display: flex;
      align-items: center;
      cursor: pointer;
      .menu-icon{
        width: 50px;
        height: 50px;
      }
      .menu-name{
        width: calc(100% - 85px);
        margin-left: 40px;
        color: #46a9ff;
        font-size: 22px;
      }
    }
    .item:hover{
      background: rgba(70, 169, 255, 0.3);
    }
    .line{
      width: 100%;
      height: 2px;
      border-radius: 50%;
      background: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0),#46a9ff,#46a9ff,rgba(0,0,0,0),rgba(0,0,0,0));
    }
  }
  .block.full{
    border: none;
    width:calc((100% - 20px) / 2);
    background: none;
    box-shadow: none;
    border-radius: 0;
    height: 100%;
    padding: 0;
    position: relative;
    #map{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 90px;
      .number-item{
        width: calc((100% - 80px)/3);
        margin-right: 40px;
      }
      .number-item:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
